<template>
  <div class="container-fluid">
    <top-nav></top-nav>
    <!-- logo -->
    <div class="login-header">
      <img
        src="https://img.alicdn.com/tfs/TB1_Gn8RXXXXXXqaFXXXXXXXXXX-380-54.png"
        alt=""
      />
    </div>
    <div class="login-content">
      <div class="login-bg">
        <div class="login-from">
          <ul class="login-item">
            <li
              :class="{ active: current == index }"
              v-for="(item, index) in titledata"
              :key="index"
              @click="tonav(index)"
            >
              {{ item }}
            </li>
          </ul>
          <form v-if="current == 1">
            <div class="login-info">
              <div class="login-icon"><i class="iconfont icon-tel"></i></div>
              <div>
                <a href="#">+86</a
                ><input type="text" placeholder="请输入手机号" />
              </div>
            </div>
            <div class="login-info">
              <div class="login-icon">
                <i class="iconfont icon-yanzhengmamima"></i>
              </div>
              <div>
                <input type="text" placeholder="请输入验证码" />
                <a href="#">发送验证码</a>
              </div>
            </div>
            <input type="button" value="登录" class="btn btn-danger" />
            <a class="zhuce" href="#" @click.prevent="toRegister">免费注册</a>
          </form>
          <form v-if="current == 0">
            <div class="login-info">
              <div class="login-icon"><i class="iconfont icon-tel"></i></div>
              <div>
                <input
                  style="width:268px"
                  type="text"
                  v-model="email"
                  placeholder="账号名/邮箱/手机号"
                />
              </div>
            </div>
            <div class="login-info">
              <div class="login-icon"><i class="iconfont icon-mima"></i></div>
              <div>
                <input
                  style="width:268px"
                  type="password"
                  v-model="password"
                  placeholder="请输入登录密码"
                />
              </div>
            </div>
            <input
              type="button"
              @click="onLogin"
              value="登录"
              class="btn btn-danger"
            />
            <a class="zhuce" href="#">忘记用户名</a>
            <a class="zhuce" href="#">忘记密码</a>
            <a class="zhuce" href="#" @click.prevent="toRegister">免费注册</a>
          </form>
        </div>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import Footers from "../index/footer/Footers.vue";
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import TopNav from "components/content/TopNav.vue";
import { login } from "network/user.js";
export default {
  components: { Footers, TopNav },
  setup(props) {
    const router = useRouter();
    let titledata = ref([]);
    let current = ref(0);
    const userinfo = reactive({
      email: "",
      password: "",
    });
    titledata = ["密码登录", "短信登录"];
    const tonav = (index) => {
      current.value = index;
    };
    const toRegister = () => {
      router.push({
        path: "/register",
      });
    };
    const onLogin = () => {
      login(userinfo).then((res) => {
        window.localStorage.setItem("token", res.access_token);
        alert("登录成功");
        (userinfo.email = ""),
          (userinfo.password = ""),
          setTimeout(() => {
            router.push({
              path: "/",
            });
          }, 1000);
      });
    };
    return {
      ...toRefs(userinfo),
      onLogin,
      toRegister,
      titledata,
      current,
      tonav,
    };
  },
};
</script>

<style scoped>
.container-fluid {
  padding: 0px;
  background: #ffffff;
}
.login-header {
  position: relative;
  margin: 0 auto;
  background: #ffffff;
  padding: 22px 0;
  width: 1190px;
  height: 70px;
}
.login-header > img {
  position: absolute;
  left: 10px;
  width: auto;
  height: 25px;
}
.login-content {
  width: 100%;
  background-color: rgb(221, 39, 38);
  height: 600px;
}
.login-content > .login-bg {
  position: relative;
  background-image: url("https://gw.alicdn.com/tfs/TB1kcCBSpXXXXarapXXXXXXXXXX-1190-600.png");
  background-repeat: no-repeat;
  width: 1190px;
  height: 600px;
  margin: 0 auto;
}
.login-content > .login-bg > .login-from {
  position: absolute;
  top: 80px;
  border-radius: 10px;
  right: 80px;
  background: #ffffff;
  width: 350px;
  height: 400px;
}

.login-item {
  padding: 0px;
  margin-left: 20px;
  margin-top: 40px;

  display: flex;
}
.login-item > li {
  margin: 0 10px;
  font-size: 16px;
  font-weight: bold;
}
.login-from > form {
  padding: 20px;
}
.login-from .login-info {
  margin-bottom: 30px;
  display: flex;
  border: 1px solid #ccc;
}
.login-icon {
  line-height: 40px;
  width: 40px;
  height: 40px;
  background: #ccc;
}
.login-info input {
  outline: none;
  line-height: 40px;
  font-size: 15px;
  padding: 10px;
  border: none;
  height: 40px;
  width: 180px;
}
.login-info a {
  font-size: 12px;
  line-height: 40px;
  margin: 0 10px;
  text-decoration: none;
  color: #000000;
}
.btn {
  width: 300px;
}
.zhuce {
  float: right;
  font-size: 12px;
  line-height: 40px;
  margin: 0 10px;
  text-decoration: none;
  color: rgb(141, 137, 137);
}
.active {
  border-bottom: 2px solid red;
}
</style>